<!DOCTYPE html>
<head lang="en">
    <meta charset="UTF-8">
    <title>关卡选择</title>
    <script src="js/jquery-1.12.0.min.js"></script>
    <style>
        html{
            width: 100%;
            height: 100%;
            min-height: 542px;
            min-width: 824px;
            padding: 0px;
        }
        body {
            margin: 0 auto;
            width: 100%;
            height: 100%;
        }
        .outbox{
            margin: 0 auto;
            width: 100%;
            height: 100%;
            background-image: url("imgs/customsChoose.jpg");
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            position: relative;
        }
        .outbox::before{
            display: inline-block;
            vertical-align: middle;
            height: 100%;
            width: 0px;
            content: '';
        }
    </style>
</head>
<body>
</body>
<script>
    function CustomsChoose(){
        var self = this;
        self.$outbox = $("<div class='outbox'></div>");
        self.$outbox.css({"background-image":"url(imgs/customsChoose.jpg)"});
        var $return = $("<div></div>");
        $return.css({
            position: "absolute",
            top: "20%",
            right:"530px",
            cursor: "pointer",
            width:"95px",
            height:"95px",
            "background-image":"url(imgs/return.png)"
        });
        $return.appendTo(self.$outbox);
        var $customsbox = $("<div></div>");
        $customsbox.css({
            "background-image":"url(imgs/customsBox.png)",
            width:"710px",
            height:"500px",
            position:"absolute",top:"10%",left:"25%"
        });
        $customsbox.appendTo(self.$outbox);
        //关卡一
        var $level1 = $("<div></div>");
        $level1.css({
            "background-image":"url(imgs/lockCustoms.png)",
            width:"83px",
            height:"83px",
            position:"absolute",
            bottom:"10%",
            left:"8%",
            "z-index":"10"

        });
        $level1.appendTo($customsbox);
        var $level2 = $level1.clone();
        $level2.css({bottom:"20%",left:"30%"});
        $level2.appendTo($customsbox);
        var $level3 = $level1.clone();
        $level3.css({bottom:"45%",left:"13%"});
        $level3.appendTo($customsbox);
        var $level4 = $level1.clone();
        $level4.css({top:"15%",left:"18%"});
        $level4.appendTo($customsbox);
        var $level5 = $level1.clone();
        $level5.css({top:"30%",left:"35%"});
        $level5.appendTo($customsbox);
        var $level6 = $level1.clone();
        $level6.css({top:"14%",left:"45%"});
        $level6.appendTo($customsbox);
        var $level7 = $level1.clone();
        $level7.css({top:"10%",left:"65%"});
        $level7.appendTo($customsbox);
        var $level8 = $level1.clone();
        $level8.css({top:"25%",left:"80%"});
        $level8.appendTo($customsbox);
        var $level9 = $level1.clone();
        $level9.css({top:"47%",left:"75%"});
        $level9.appendTo($customsbox);
        var $level10 = $level1.clone();
        $level10.css({bottom:"5%",left:"75%"});
        $level10.appendTo($customsbox);
    }
    $(function(){
        var cuschoose = new CustomsChoose($("body"));
    })
</script>
</html>